import { ReactNode, CSSProperties } from 'react'
import { useState, useEffect } from 'react'

interface TransitionPanelProps {
  show: boolean // 控制显示/隐藏
  width?: number // 宽度（横向侧边栏）
  height?: number // 高度（纵向面板）
  duration?: number // 动画时长 ms
  style?: CSSProperties // 自定义样式
  className?: string // Tailwind 或其他 class
  children?: ReactNode
  properties?: string // 过渡属性，例如 "width, opacity, transform"
}

export default function TransitionPanel({
  show,
  width = 240,
  height,
  duration = 500,
  style,
  className = '',
  children,
  properties = 'width, opacity'
}: TransitionPanelProps) {
  const [visible, setVisible] = useState(show)

  useEffect(() => {
    let timer: NodeJS.Timeout
    if (show) {
      setVisible(true)
    } else {
      timer = setTimeout(() => setVisible(false), duration)
    }
    return () => clearTimeout(timer)
  }, [show, duration])

  return (
    <div
      className={className}
      style={{
        width: width ? (show ? width : 0) : undefined,
        height: height ? (show ? height : 0) : undefined,
        opacity: show ? 1 : 0,
        overflow: 'hidden',
        transitionProperty: properties,
        transitionDuration: `${duration}ms`,
        transitionTimingFunction: 'ease-in-out',
        ...style
      }}
    >
      {visible && children}
    </div>
  )
}
